<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" plain @click="addroledialog">添加管理员</el-button>
    </div>
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="请输入" v-model="listQuery.input1">
      </el-input>
      <el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.type" placeholder="请选择">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
    </div>
    <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='用户名' width="95">
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" width="95">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" width="95">
        <template slot-scope="scope">
          <span>{{scope.row.sex | statusFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色" align="center" width="95">
        <template slot-scope="scope">
          <span>{{scope.row.role}}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" align="center" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.email}}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近登录时间" align="center" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.display_time}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="95">
        <template slot-scope="scope">
          <span>{{scope.row.status}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="success" size="mini" v-if="scope.row.status!='true'" @click="qiyong(scope.row, 'true')" plain>启用</el-button>
          <el-button type="warning" size="mini" v-if="scope.row.status!='false'" @click="jinyong(scope.row, 'false')" plain>禁用</el-button>
          <el-button type="primary" size="mini" @click="bianji(scope.row,scope.$index)" plain>编辑</el-button>
          <el-button type="danger" size="mini" @click="shanchu(scope.row, scope.$index)" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 502px;">
      <uploader :src="'http://192.168.0.98:8080/util/upload'"></uploader>
    </div>

    <!--分页-->
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30,50]"
                     :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!--分页END-->

    <!--编辑表单弹窗-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="formsrules" ref="dataForm" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="temp.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="时间" :label-width="formLabelWidth" prop="display_time">
          <el-date-picker v-model="temp.display_time" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="selected">
          <el-select class="filter-item" v-model="temp.sex" placeholder="请选择">
            <el-option v-for="item in sexchose" :key="item.key" :label="item.display_name" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员" :label-width="formLabelWidth" prop="selected">
          <el-select class="filter-item" v-model="temp.role" placeholder="请选择">
            <el-option v-for="item in rolesOptions" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" prop="selected">
          <el-select class="filter-item" v-model="temp.status" placeholder="请选择">
            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="emailinput" label="邮箱" :label-width="formLabelWidth">
          <el-input type="email" v-model="temp.email"></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="addrole">确 定</el-button>
        <el-button v-else type="primary" @click="sureEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑表单弹窗END-->
    <div class="myEditor">
      <editor ref="myTextEditor"
              :fileName="'myFile'"
              :uploadUrl="uploadUrl"
              v-model="content"></editor>
      <p><button @click="upload111">点击</button></p>
      <div v-html="content"></div>
    </div>
  </div>
</template>

<script>
  import { getList, addroles, filtersearch, qiyong, jinyong, sureEdit, shanchu } from '@/api/system/roleslist'
  import editor from '@/components/Quilleditor/Quilleditor.vue'
  import uploader from '@/components/Uploader/index.vue'

  const calendarTypeOptions = [
    { key: '1', display_name: '土狗' },
    { key: '2', display_name: '野狗' },
    { key: '3', display_name: '志瑞' },
    { key: '4', display_name: '藏獒' }
  ]

  const sexchose = [
    { key: 'man', display_name: '男人' },
    { key: 'woman', display_name: '女人' }
  ]

  export default {
    data() {
      return {
        list: null, // 设置列表参数
        listLoading: true, // 设置加载动画默认值
        total: null, // 分页总页数
        calendarTypeOptions, // 一些参数
        listQuery: {
          page: 1, // 分页当前页
          limit: 20, // 分页每页数量
          input1: undefined, // 搜索栏一
          type: undefined // 搜索栏下拉选择
        },
        temp: {
          id: undefined,
          role: '',
          display_time: new Date(),
          name: '',
          sex: '',
          status: '',
          email: ''
        },
        sexchose,
        rolesOptions: ['管理员', '员工', '土狗'],
        statusOptions: ['true', 'false'],
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '创建'
        },
        dialogFormVisible: false, // 编辑角色弹窗控制
        formLabelWidth: '120px', // 表格label大小
        formsrules: {
          name: [{ required: true, message: '请输入', trigger: 'blur' }],
          display_time: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],
          selected: [{ required: true, message: '请选择', trigger: 'change' }],
          emailinput: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]
        },
        uploadUrl: 'http://192.168.0.98:8080/util/upload',
        content: ''
      }
    },
    components: {
      editor, uploader
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          man: '男',
          woman: '女'
        }
        return statusMap[status]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      upload111() {
        console.log(this.content)
      },
      // 获取列表
      fetchData() {
        this.listLoading = true
        getList(this.listQuery).then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        filtersearch(this.listQuery).then(response => {
          this.fetchData()
        }).catch(error => {
          this.$message({
            message: error,
            type: 'info'
          })
        })
      },
      addroledialog() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      resetTemp() {
        this.temp = {
          id: undefined,
          role: '',
          display_time: new Date(),
          name: '',
          sex: '',
          status: '',
          email: ''
        }
      },
      addrole() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
            this.temp.author = '原创作者'
            this.temp.display_time = new Date(this.temp.display_time)
            addroles(this.temp).then(() => {
              this.list.unshift(this.temp)
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },
      qiyong(row, status) {
        this.listLoading = true
        qiyong(row.id).then(response => {
          this.listLoading = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          row.status = status
        })
      },
      jinyong(row, status) {
        this.listLoading = true
        jinyong(row.id).then(response => {
          this.listLoading = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          row.status = status
        })
      },
      bianji(row) {
        this.temp = Object.assign({}, row)
        this.temp.display_time = new Date(this.temp.display_time)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      sureEdit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const temData = Object.assign({}, this.temp)
            temData.display_time = +new Date(temData.display_time)
            sureEdit(temData).then(response => {
              for (const v of this.list) {
                if (v.id === this.temp.id) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.temp)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            })
          } else {
            return false
          }
        })
      },
      shanchu(row) {
        this.$confirm('确定删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          shanchu(row.id).then(() => {
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      delinfo(row) {
        shanchu(row.id).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      },
      handleSizeChange(val) {
        console.log(val)
        this.listQuery.limit = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        console.log(val)
        this.listQuery.page = val
        this.fetchData()
      },
      handleDownload() {
        console.log(123)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .filter-container{
    padding-bottom: 10px;
  }
  .quill-editor{
    height: 260px;
  }
</style>
